<template>
  <v-container
    fluid
  >
    <v-row justify="start">
      <v-col
        cols="12"
        md="12"
      >
        <material-card
          color="primary"
          full-header
        >
          <template #title>
            <v-alert
              :type="alertType"
              dense
              icon="mdi-ruler-square-compass"
            >
              {{ lanChar.ruleConfig.MCGroupStatusTitle }}
              <v-btn
                class="mx-0"
                fab
                icon
                x-small
                color="primary"
                @click="getMcGroupsInfo()"
              >
                <v-icon>mdi-cached</v-icon>
              </v-btn>
            </v-alert>
          </template>
          <v-simple-table>
            <thead>
              <tr>
                <th class="primary--text">
                  {{ lanChar.ruleConfig.MCGroupRuleName }}
                </th>
                <th class="primary--text">
                  {{ lanChar.ruleConfig.MCGroupRuleTcpServerInfo }}
                </th>
                <th class="primary--text">
                  {{ lanChar.ruleConfig.MCGroupRuleUdpServerInfo }}
                </th>
                <th class="primary--text">
                  {{ lanChar.ruleConfig.MCGroupRuleTerminalInfo }}
                </th>
              </tr>
            </thead>
            <tbody
              :update="uiUpdateCnt"
            >
              <tr
                v-for="(value, i) in groupInfo.infos"
                :key="i"
                :value="value"
                @dblclick="statusDialog('McGroupStatusViewDialog', {val: value, mode: 'view'})"
              >
                <td class="text-left">
                  {{ value.GroupName }}
                </td>
                <td class="text-left">
                  <v-row
                    dense
                    align="center"
                  >
                    <span class="pr-3">
                      {{ formatUris(value.TcpServerInfo.Uris) }}
                    </span>
                    <v-icon>mdi-alpha-n-box-outline</v-icon>
                    <span class="pl-3">
                      {{ value.TcpServerInfo.ConnectionNum }}
                    </span>
                  </v-row>
                </td>
                <td class="text-left">
                  <v-row
                    dense
                    align="center"
                  >
                    <span class="pr-3">
                      {{ formatUris(value.UdpServerInfo.Uris) }}
                    </span>
                    <v-icon>mdi-alpha-n-box-outline</v-icon>
                    <span class="pl-3">
                      {{ value.UdpServerInfo.ConnectionNum }}
                    </span>
                  </v-row>
                </td>
                <td class="text-left">
                  <v-row
                    dense
                    align="center"
                  >
                    <span class="pr-3">
                      {{ formatUris(value.TerminalInfo.Uris) }}
                    </span>
                    <v-icon>mdi-alpha-n-box-outline</v-icon>
                    <span class="pl-3">
                      {{ value.TerminalInfo.ConnectionNum }}
                    </span>
                  </v-row>
                </td>
              </tr>
            </tbody>
          </v-simple-table>
          <div class="py-6" />
        </material-card>
      </v-col>
    </v-row>
    <material-snackbar-tip
      v-model="snackbarDescp.snackbar"
      :type="snackbarDescp.snackbarType"
      :timeout="snackbarDescp.snackbarTimeout"
      v-bind="{
        bottom: true,
        right: true
      }"
      :text="snackbarDescp.snackbarContent"
    />
    <alert-dialog
      v-model="alert.dialog"
      :title="alert.title"
      :msg="alert.msg"
    />
    <confirm-dialog
      v-model="confirm.dialog"
      :title="confirm.content.title"
      :msg="confirm.content.msg"
      :callback="confirm.operate.callback"
      :input="confirm.operate.input"
    />
    <mc-group-status-view-dialog
      v-model="status.mcGroupStatusViewDialog"
      :input="status.operate.input"
    />
    <mc-uri-edit-dialog
      v-model="status.mcUriEditDialog"
      :input="status.operate.input"
    />
  </v-container>
</template>

<script>
  import globalDef from '@/util/globals'
  import lan from '@/util/lan-char'
  import * as mcAxios from '@/util/mcaxios'
  export default {
    name: 'McGroupStatus',

    data () {
      return {
        lanChar: lan.GetLan(),
        alertType: 'success',
        groupInfo: {
          infos: [
            {
              GroupName: 'group-xx-1',
              TcpServerInfo: {
                Uris: [
                  { Uri: 'tcp://ip-address/port' },
                ],
                ConnectionNum: 10,
              },
              UdpServerInfo: {
                Uris: [
                  { Uri: 'udp://ip-address/port' },
                ],
                ConnectionNum: 10,
              },
              TerminalInfo: {
                Uris: [
                  { Uri: 'udp://ip-address/port1' },
                  { Uri: 'udp://ip-address/port2' },
                  { Uri: 'udp://ip-address/port3' },
                  { Uri: 'udp://ip-address/port4' },
                  { Uri: 'udp://ip-address/port5' },
                  { Uri: 'tcp://ip-address/port1' },
                  { Uri: 'tcp://ip-address/port2' },
                  { Uri: 'tcp://ip-address/port3' },
                  { Uri: 'tcp://ip-address/port4' },
                  { Uri: 'tcp://ip-address/port5' },
                ],
                ConnectionNum: 10,
              },
            },
            {
              GroupName: 'group-xx-2',
              TcpServerInfo: {
                Uris: [
                  { Uri: 'tcp://ip-address/port' },
                ],
                ConnectionNum: 10,
              },
              UdpServerInfo: {
                Uris: [
                  { Uri: 'udp://ip-address/port' },
                ],
                ConnectionNum: 10,
              },
              TerminalInfo: {
                Uris: [
                  { Uri: 'udp://ip-address/port1' },
                  { Uri: 'udp://ip-address/port2' },
                  { Uri: 'udp://ip-address/port3' },
                  { Uri: 'udp://ip-address/port4' },
                  { Uri: 'udp://ip-address/port5' },
                  { Uri: 'tcp://ip-address/port1' },
                  { Uri: 'tcp://ip-address/port2' },
                  { Uri: 'tcp://ip-address/port3' },
                  { Uri: 'tcp://ip-address/port4' },
                  { Uri: 'tcp://ip-address/port5' },
                ],
                ConnectionNum: 10,
              },
            },
          ],
          infosBak: [],
        },
        uiUpdateCnt: 0,
        statusTimer: 0,
        // snackbar data
        snackbarDescp: {
          snackbar: false,
          snackbarContent: 'snackbar content',
          snackbarTimeout: 2000,
          snackbarType: 'info',
        },
        // dialog data
        alert: {
          dialog: false,
          title: '',
          msg: '',
        },
        confirm: {
          dialog: false,
          content: {
            title: '',
            msg: '',
          },
          operate: {
            callback: null,
            input: null,
          },
        },
        status: {
          mcGroupStatusViewDialog: false,
          mcUriEditDialog: false,
          operate: {
            input: null,
          },
        },
      }
    },
    computed: {
    },
    watch: {
      status: {
        handler (newValue, oldValue) {
          if (this.status.mcGroupStatusViewDialog === false ||
            this.status.mcUriEditDialog === false) {
            this.getMcGroupsInfo()
          }
        },
        deep: true,
      },
    },
    created () {
      this.startReflash()
    },
    mounted () {
      globalDef.VueObject.$on('lanChange', lanChar => {
        this.lanChar = lanChar
      })

      this.getMcGroupsInfo()
    },
    beforeDestroy () {
      clearInterval(this.statusTimer)
    },
    methods: {
      tipInfo (level, content, timeout) {
        this.snackbarDescp.snackbarType = level
        this.snackbarDescp.snackbarContent = content
        this.snackbarDescp.snackbarTimeout = timeout
        this.snackbarDescp.snackbar = true
      },
      alertInfo (title, content) {
        this.alert.dialog = true
        this.alert.title = title
        this.alert.msg = content
      },
      confirmDialog (title, msg, operate, data) {
        this.confirm.content.title = title
        this.confirm.content.msg = msg
        this.confirm.operate.callback = operate
        this.confirm.operate.input = data
        this.confirm.dialog = true
      },
      statusDialog (name, data) {
        this.status.operate.input = data
        if (name === 'McGroupStatusViewDialog') {
          this.status.mcGroupStatusViewDialog = true
        }
        if (name === 'McUriEditDialog') {
          this.status.mcUriEditDialog = true
        }
      },
      formatUris (uris) {
        var out = ''
        for (const e of uris) {
          if (out.length > 60) {
            out += '...(' + this.lanChar.totalNumbers + uris.length + ')'
            break
          }
          out += (e.Uri + ';')
        }
        return out
      },
      getMcGroupsInfo () {
        const data = {
          request_type: 'mc groups info get',
          instance_id: 'instance_id',
          sequence_no: 1000,
        }
        mcAxios.axiosGetConfig(data)
          .then((res) => {
            if (res.data.status === true) {
              this.groupInfo.infos = []
              res.data.data.forEach((element, index) => {
                element.ClientLimit = false
                this.groupInfo.infos[index] = element
                this.groupInfo.infosBak[index] = element
              })
            } else {
              console.log('getMcGroupsInfo get res fail')
            }
          })
          .catch((e) => {
            console.log('getMcGroupsInfo get fail: ', e)
          })
      },
      startReflash () {
        clearInterval(this.statusTimer)
        this.statusTimer = setInterval(this.getMcGroupsInfo, globalDef.STATUS_QUERY_INTERVAL)
      },
    },
  }

</script>
